 <!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>项目解读</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../../css/doctor/project/common.css" />
		<link rel="stylesheet" href="../../../css/doctor/project/itemDetail.css" />
		<link rel="stylesheet" href="../../../css/doctor/project/iconfont.css" />
		<script src="../../../js/vconsole.min.js"></script>
	</head>
	<body>
		<!--页面主体信息-->
		<section>
			<div id="container">
				<!--搜索框-->
				<div class="searchBox">
					<span class="mui-icon mui-icon-search"></span>
					<input @click="jumpSearch" type="text" placeholder="促甲状腺激素"/>
				</div>
				<!--导航-->
				<ul class="navBtn">
					<li><a class="control-item" :class="state=='xm'?'active':''" href="#" id="xm" >检验项目</a></li>
					<li><a class="control-item" :class="state=='jy'?'active':''" href="#" id="jy" >临床检验</a></li>
				</ul>
				
				<!--折叠面板-->
				<div class="listDetail">
					<!--检验目录-->
					<ul class="itemBox" v-if="state=='xm'">
						<!--第一行内分泌-->
				        <li class="mui-table-view-cell mui-collapse" :class="{'mui-active':msg.id==xmNum}" v-for="msg in message" @tap="projectClick(msg.id,$event)">
				            <a class="mui-navigate-right" href="javascript:;" @tap.prevent="clickA(msg.id,msg.name,$event)">
				            	<span class="listIcon">
				            		<i class="icon iconfont icon-tubiaozhizuomoban1"></i>
				            	</span>
				            	<div class="borderRight"></div>
				            	<span>{{msg.name}}</span>
				            </a>
				            <!--二级列表-->
				            <div class="mui-collapse-content listDetailContent" v-for="item in msg.children">
				            	<a href="javascript:;" class="listDetail" @tap.prevent="clickB(item.id,item.name,$event)">
					            	<span class="listIcon mui-pull-left">.</span>
					            	<!--引导线和小圆点图标-->
					            	<div class="borderItemRight">
					            		<div class="guideLine"></div>
					            	</div>
					            	<!--引导线和小圆点图标,结束-->
					                <span class="mui-navigate-right listItem1">{{item.name}}</span>
				                </a>
				                <!-- 三级列表 -->
                                <ul class="listSonBox" style="display: none;" v-if="item.children!=null?true:false">
                                    <li class="listSon" v-for="p in item.children" @tap.prevent="clickS(p.id,p.name)">
                                        <a class="mui-navigate-right" href="javascript:;">
                                            <span class="listIcon">.</span>
                                            <div class="borderRight"></div>
                                            <div class="guidCircleBlack"></div>
                                            <span class="listSonTitle">{{p.name}}</span>
				                        </a>
                                    </li>
                                </ul>
				            </div>
				        </li>
					</ul>
					<!--临床检验-->
					<ul class="itemBox" v-if="state=='jy'">
						<!--第一行血液标本采集-->
				        <li class="mui-table-view-cell mui-collapse" :class="{'mui-active':sample.id==jyNum}" v-for="sample in jyMessage" @tap.prevent="testClick(sample.id,$event)">
				            <a class="mui-navigate-right" href="javascript:;" @tap.prevent="clickA(sample.id,sample.name,$event)">
				            	<span class="listIcon listIconLast">
				            		<i class="icon iconfont icon-tubiaozhizuomoban4"></i>
				            	</span>
				            	<div class="borderRight"></div>
				            	<span>{{sample.name}}</span>
				            </a>
				            <!--二级列表-->
				            <div 	class="mui-collapse-content listDetailContent" v-for="samp in sample.children">
				            	<a href="javascript:;" class="listDetail" @tap.prevent="clickB(samp.id,samp.name,$event)">
					            	<span class="listIcon mui-pull-left">.</span>
					            	<!--引导线和小圆点图标-->
					            	<div class="borderItemRight">
					            		<div class="guideLine"></div>
					            	</div>
					            	<!--引导线和小圆点图标,结束-->
					                <span class="mui-navigate-right listItem1">{{samp.name}}</span>
					            </a>
					            <!-- 三级列表 -->
                                <ul class="listSonBox" style="display: none;" v-if="samp.children!=null?true:false">
                                    <li class="listSon" v-for="p in samp.children" @tap.prevent="jumpClinicalTest(p.id,p.name)">
                                        <a class="mui-navigate-right" href="javascript:;">
                                            <span class="listIcon">.</span>
                                            <div class="borderRight"></div>
                                            <div class="guidCircleBlack"></div>
                                            <span class="listSonTitle">{{p.name}}</span>
				                        </a>
                                    </li>
                                </ul>
				            </div>				            
				        </li>
					</ul>
					<div class="noData" v-if="!message.length>0||!jyMessage>0">
						<p><img src="../../../img/nodata.png"/></p>
						<p>暂无内容</p>
					</div>
				</div>
			</div>
		</section>
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/vue.js"></script>
		<script src="../../../js/cmms.js?time=333"></script>
		<script type="text/javascript">
			new Vue({
				el:'#container',
				data:{
					message:[],
					jyMessage:[],
					itemDetail:{},
					itemSample:{},
					state:'xm',
//					isShow:false,
					xmNum:'',
					jyNum:'',
					appId:''
				},
				mounted(){
//					var vConsole = new VConsole();
					this.getUrl();
					this.loadMessage();
					this.muiInit();
					console.log(location.href);
				},
				methods:{
					getUrl(){
						let _this=this;
						var url = location.search; //获取url中"?"符后的字串    
						var theRequest = new Object();
					   	if (url.indexOf("?") != -1) {   
					      var str = url.substr(1);  
//					      console.log(str);
					      strs = str.split("&");  
					      for(var i = 0; i < strs.length; i ++) {   
					         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);   
					      } 
					   	}   
					   	_this.name = theRequest.name;
					   	console.log(_this.name);
					   	console.log(_this.name=='index');
					   	_this.state='xm';
					},
					loadMessage:function(){
						let _this=this;
						let localState = localStorage.getItem('stateS');
						console.log(localState);
						let stateOpenXM = localStorage.getItem('stateOpenXM');
						let stateOpenJY = localStorage.getItem('stateOpenJY');
						if(_this.name=='index'){
							localStorage.removeItem('stateOpenXM');
							localStorage.removeItem('stateOpenJY');
						}
						if(localState==null){
							_this.state = 'xm';
						}else{
							_this.state = localState;
						}
						
						_this.xmNum = stateOpenXM;
						_this.jyNum = stateOpenJY;
						console.log(_this.xmNum,_this.jyNum);
						
						AT.muiAjaxDoctor('/common/common/selectCategoryByType','post',{
							type:'1'
						},
						function(res){
							console.log(res);
							_this.message = res;
//							console.log(this.message);
						});
						AT.muiAjaxDoctor('/common/common/selectCategoryByType','post',{
							type:'2'
						},
						function(res){
							console.log(res);
							_this.jyMessage = res;
//							console.log(this.jyMessage);
						});
					},
					/*点击项目，把检验项目的id存到本地，保留展开的状态*/
					projectClick:function(id,e){
						console.log(id);
						localStorage.setItem('stateOpenXM',id);
					},
					/*点击项目，把临床检验的id存到本地，保留展开的状态*/
					testClick:function(id,e){
						console.log(id);
						localStorage.setItem('stateOpenJY',id);
					},
					//导航
					muiInit:function(){
						let _this=this;
						mui('.navBtn').on('tap','a',function(){
							let id=this.getAttribute('id');
							_this.state=id;
							console.log(_this.state);
							if(id=='xm'){
								_this.jyNum = '';
								localStorage.removeItem('stateOpenJY');
							}else if(id=='jy'){
								_this.xmNum = '';
								localStorage.removeItem('stateOpenXM');
							}
						})
					},
					//检查一级目录是否有子菜单
					clickA:function(id,title,e){
						let _this=this;
						let a=e.currentTarget;
						if(!a.nextElementSibling){
							let t= encodeURI(encodeURI(title));
							let s=_this.state;
							localStorage.setItem('stateS',s);
							if(s=='xm'){
								location.href="thyroidTest.html?id="+id+'&title='+t;
							}else{
								location.href="clinicalTest.html?id="+id+'&title='+t;
							}
						}
					},
					//检查目录三级子菜单折叠
					clickB:function(id,title,e){
						let _this=this;
						let a=e.currentTarget;
						//存在三级子目录的打开三级目录
						if(a.nextElementSibling){
							let ul=a.nextElementSibling;
							if(ul.style.display=='none'){
								ul.style.display='block';
							}else{
								ul.style.display='none';
							}
						}
						else{
							//console.log(id);
							//不存在跳转到页面
							let t= encodeURI(encodeURI(title));
							let s=_this.state;
							localStorage.setItem('stateS',s);
							if(s=='xm'){
								location.href="thyroidTest.html?id="+id+'&title='+t;
							}else{
								location.href="clinicalTest.html?id="+id+'&title='+t;
							}
						}
					},
					//三级子列表点击跳转
					clickS:function(id,title){
						let _this=this;
						let t= encodeURI(encodeURI(title));
						let s=_this.state;
						localStorage.setItem('stateS',s);
						location.href="thyroidTest.html?id="+id+'&title='+t;
					},
					//跳转到搜索页面
					jumpSearch:function(){
						let _this=this;
						let s=_this.state;
						localStorage.setItem('stateS',s);
						location.href="search.html";
					},
					//跳转到检测详情
					jumpTestDetail:function(id,title){
						let _this=this;
						let t= encodeURI(encodeURI(title));
						let s=_this.state;
						localStorage.setItem('stateS',s);
						location.href="testDetail.html?id="+id+'&title='+t;
					},
					//跳转到临床检验详情页
					jumpClinicalTest:function(id,title){
						let _this=this;
						let t = encodeURI(encodeURI(title));
						let s=_this.state;
						localStorage.setItem('stateS',s);
						location.href="clinicalTest.html?id="+id+'&title='+t;
					}
				}
			})
		</script>
	</body>
</html>